<template>
  <n-layout :native-scrollbar="false" class="layout-base">
    <n-layout-header class="layout-header">
      <n-flex justify="space-around">
        <n-ul class="layout-ul clear_float">
          <n-li :class="{activation:active==='screen-home'}"
                @click="to('screen/home')">
            数据概览
          </n-li>
          <n-li>电网监控</n-li>
          <n-li>设备监控</n-li>
        </n-ul>
        <div class="head-title" @click="to()">
          <n-h1><strong>无人机智慧巡检综合服务平台</strong></n-h1>
        </div>
        <n-ul class="layout-ul clear_float">
          <n-li :class="{activation:active==='screen-statistic'}"
                @click="to('screen/statistic')">
            数据统计
          </n-li>
          <n-li>信息录入</n-li>
          <n-li>报表审批</n-li>
        </n-ul>
      </n-flex>
    </n-layout-header>
    <n-layout-content class="layout-content">
      <slot />
    </n-layout-content>
  </n-layout>
</template>

<script>
import {inject, defineComponent} from "vue";
import {
  HomeOutline as HomeIcon,
  BarChartOutline as BarChartIcon,
  LibraryOutline as LibraryIcon
} from "@vicons/ionicons5"
export default defineComponent({
  name: "screen-communal",
  props:{
    active:{
      type:String,
      required:true,
      default:'screen-home'
    }
  },
  setup(){
    const {toPage} = inject("toPage")
    return{
      to:toPage,
      HomeIcon,BarChartIcon,LibraryIcon
    }
  }
})
</script>

<style lang="scss" scoped>
.layout-base{
  background: url("/src/assets/images/screen/Analysis-box-bg.jpg") repeat-y;
  height: 100vh;
  position: relative;
  color: white;
  overflow: hidden;
}
.layout-header{
  position: relative;
  background: url("/src/assets/images/screen/hd-bg.png") no-repeat center center #dda35b11 scroll;
  background-size: 100% 5.4rem;
  color: white;
  height: 4.5rem;
  margin: 0;
  overflow: hidden;
  .head-title{
    height: 4.5rem;
    width: 21rem;
    margin: 0;
    padding: 0;
    text-align: center;
    transition: 0.2s 0s ease all;
    &:hover{
      cursor:pointer;
      color: #f8f2f1dd;
      background: #6bd2fe11;
      border-radius: 21rem;
      transition: 0.2s 0s ease all;
    }
    h1{
      color: #f8f2f1ff;
      font-size: 24px;
      margin-top: 10px;
      font-weight: 800;
    }
  }
  .layout-ul{
    position: relative;
    font-size: 15px;
    margin-top: .5rem;
    li{
      float: left;
      margin: 5px;
      color: #f2f2f2;
      text-align: center;
      width: 7rem;
      height: 3rem;
      line-height: 3rem;
      transition: 0.5s 0s ease all;
      &:hover{
        cursor:pointer;
        border-bottom: 3px solid #4b8df8;
        color: #fff;
        border-radius: 5px;
        background: radial-gradient(#fff0, #fff1, #034a68);
        transition: 0.5s 0s ease all;
      }
    }
  }
}
.activation{
  border-radius: 5px;
  transform: rotateY(-30deg);
  background: radial-gradient(#fff0, #fff1, #034a68);
  border-bottom: 3px solid #4b8df8;
}
.layout-content{
  background-color: #d7ffff01;
  min-height: 100vh;
  color: #fff;
  padding: 1rem;
}
</style>